<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器：语法：选择器：hover 悬停功能改变效果【所有元素都可以用】
			
			*/
		   h1:hover{
			   color: #e4393c;
		   }
		   /*练习：页面生成200px*200px四方块，默认红色，鼠标悬停后，调整黄色*/
		  div{
			  width: 200px;
			  height: 200px;
			  background: red;
		  }
		   div:hover{
			   background: #ffff00;
		   }
		   /*超链接4种状态*/
		   /*1.超链接未点击时  伪类选择器：link*/
		   a:link{
			   color: red;
			   /*下划线*/
			   text-decoration: none;
		   }
		   /*2.点击后超链接  伪类选择器：visited*/
		    a:visited{
			   color: blue;
		   } 
		   /*3.悬停超链接状态  伪类选择器：hover*/
		   a:hover{
			   color: yellow;
		   }
		   /*4.点击跳转时状态  伪类选择器：active*/
		   a:active{
			   font-size: 50px;
		   }
		   /*:focus 伪类选择器针对input元素，鼠标点击输入框时候状态*/
		   input:focus{
			   background: red;
		   }
		   li:first-child{
			   color: #ee1577;
		   }
		   li:last-child{
			   color: #1111ee;
		   }
		   li:nth-child(3){
			   color: mistyrose;
			   font-size: 20px;
		   }
		   
		</style>
	</head>
	<body>
		<!-- 列表、表格：伪类选择器：first-child、：last-child、：nth-child(n) -->
		<ul>
			<li>还珠格格</li>
			<li>情深深雨蒙蒙</li>
			<li>一帘幽梦</li>
			<li>庭院深深</li>
			<li>在水一方</li>
		</ul>
		
		
		<!-- 表单：伪类选择器  :focus -->
		<input type="text">
		
		
		<hr>
		<h1>悬停效果</h1>
		<div></div>
		<h1>针对超链接了解4种状态</h1>
		<a href="#">超链接1</a>
		<a href="#">超链接2</a>
		<a href="#">超链接3</a>
	</body>
</html>